<template>
    <div class='cookwrap'>
        <div>
            <img :src="a" alt="">
            <div class='infinite'>
                <p>炊具 <span>&gt;</span></p>
                <ul class='ultwo'>
                    <li>锅具</li>
                    <li>炊具周边</li>
                </ul>
                <ul class='ulthree'>
                    <li>毛巾浴巾浴袍</li>
                    <li>浴室拖鞋</li>
                    <li>洗漱用具</li>
                </ul>
                <ul class='ulfour'>
                    <li>洗涤用品</li>
                    <li>晾晒用品</li>
                    <li>防潮防蛀</li>
                    <li>衣物整理</li>
                </ul>
                <div id='ulmore'>
                    <ul class='ulmore1'>
                        <li>
                            <span>男装女装怒</span>
                        </li>
                        <li>
                            <span>女装</span>
                        </li>
                        <li>
                            <span>贴身衣物</span>
                        </li>
                        <li>
                            <span>运动服饰</span>
                        </li>
                        <li>
                            <span>服装配件</span>
                        </li>
                        <li>
                            <span>饰品</span>
                        </li>
                        
                    </ul>
                </div>
                
                <ol>
                    <li v-for='(item,index) in 8' :key='index'>
                        <img :src="b" alt="">
                        <span class='qqq'>ABS陶瓷大容器汤煲(3.5L)</span>
                        <div class='ul2div'>
                            <strong>活动</strong>
                            <span class='divspan'>￥299</span>
                            <i class='divi'>￥599</i>
                        </div>
                    </li>
                </ol>
            </div>
            
        </div>
        
    </div>
</template>

<script>
import a from '@/assets/imgindex/7.png'
import b from '@/assets/imgindex/8.png'
import BScroll from 'better-scroll'
export default {
    data() {
        return {
            a,
            b
        }
    },
    mounted(){
        this.$nextTick(()=>{
            let scroll = new BScroll(".cookwrap", {
                // 滚动部分允许点击
                click: true,
                // 允许上拉加载
                pullUpLoad: true,
            });
            scroll = new BScroll("#ulmore", {
                click: true,         
                scrollX:true,
                scrollY:false
            });
        })
        
    }
}
</script>

<style lang='stylus'>
    .cookwrap{
        position absolute
        top 89px
        left 0
        right 0
        bottom 50px
        overflow hidden
        img{
            width 100%
            height 176px
        }
        .infinite{
            p{
                margin-top 27px
                text-align center
                
                font-size: 15px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #242424;
                span{
                    font-size 12px
                    color #2B2B2B
                    text-align center
                    margin-left 11px
                }
            }
            .ultwo{
                margin auto
                margin-top 12px
                
                height 12px
                display flex
                justify-content center
                align-items center
                li{ 
                    
                    height 12px             
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #353535;
                    text-align center
                    display flex
                    justify-content center

                }
                li:nth-child(1){
                    border-right 1px solid #777
                    padding-right 19px
                }
                li:nth-child(2){
                    padding-left 19px
                }
            }
            .ulthree{
                margin auto
                margin-top 12px
                height 12px
                display flex
                justify-content center
                align-items center 
                li{
                    height 12px             
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #353535;
                    text-align center
                    display flex
                    justify-content center 
                }
                li:nth-child(1){
                    border-right 1px solid #777
                    padding-right 19px
                }
                li:nth-child(3){
                    padding-left 19px
                }
                li:nth-child(2){
                    border-right 1px solid #777
                    padding-left 19px
                    padding-right 19px
                }
            }
            .ulfour{
                margin auto
                margin-top 12px
                height 12px
                display flex
                justify-content center
                align-items center
                li{
                    height 12px             
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #353535;
                    text-align center
                    display flex
                    justify-content center
                    
                }
                li:nth-child(1){
                    border-right 1px solid #777
                    padding-right 19px
                }
                li:nth-child(3){
                    border-right 1px solid #777
                    padding-left 19px
                    padding-right 19px
                }
                li:nth-child(2){
                    border-right 1px solid #777
                    padding-left 19px
                    padding-right 19px
                }
                li:nth-child(4){
                    padding-left 19px
                }
            }
            #ulmore{
                           
                width 100%
                .ulmore1{          
                    margin-top 12px
                    
                    display inline-flex
                    height 12px
                    overflow hidden
                    li{
                        height 12px                       
                        font-size: 12px;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #353535;
                        border-right 1px solid #777
                        
                        width 86px
                        text-align center
                        span{
                            
                            height 100%
                            text-align center
                            margin-left 10px
                            margin-right 10px
                        }
                    }
                    li:nth-last-child(1){
                        border-right none
                    }        
                }
            }
        
            ol{
                width 100%
                margin-top 17px
                border-top 1px #F0F0F0 solid
                border-bottom 1px #F0F0F0 solid
                display flex
                flex-wrap wrap
                li{
                    width 50%
                    height 230px
                    border-top 1px #F0F0F0 solid
                    border-right 1px #F0F0F0 solid
                    display flex
                    flex-direction column
                    justify-content center
                    align-content center
                    img{
                        width 160px
                        height 160px
                        margin-left 17px
                    }
                    .qqq{
                        margin-top  5px   
                        margin-left 18px
                        height 22px
                        font-size: 10px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #333333;
                        line-height: 12px;
                    }
                    .ul2div{
                        margin-left 18px
                        width 110px
                        height 18px
                        display flex
                        justify-content flex-start
                        align-items center
                        strong{
                            width 24px
                            height 13px
                            background #BB2742
                            color #fff
                            line-height 13px
                            text-align center
                            font-size 8px
                        }
                        .divspan{
                            
                            display flex
                            justify-content center
                            align-items center
                            font-size: 11px;
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: #BB2742;
                                
                        }
                        .divi{
                            text-decoration line-through
                            font-size: 9px;
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: #999999;
                                
                        }
                    }       
                }
                li:nth-child(1){
                    border-top none
                }
                li:nth-child(2){
                    border-top none
                }
                li:nth-child(2n){
                    border-right none
                }
            }
        }
        
    }
</style>